<template>
  <div class="newsinfo">
    <h3>{{newsinfo.title}}</h3>
    <p class="time">
      <span>发表时间：{{newsinfo.add_time|gettime}}</span>
      <span>点击量：{{newsinfo.click}}</span>
    </p>
    <hr>
    <!-- 必须使用v-html，因为可以解析html标签 -->
    <div class="content" v-html="newsinfo.content"></div>
    <!-- 单独一个评论子组件，因为多处用到评论 
      1、新建一个子组件
      2、父组件中引入
      3、定义为组件
    4、调用子组件-->
    <!--第一步 父组件向子组件传值，使用v-bind -->
    <comment v-bind:id="id"></comment>
  </div>
</template>
<script>
// 第二步，引入子组件
import comment from "../pubcom/comment.vue";
export default {
  data() {
    return {
      // 接收路由通过url传递过来的参数,不要忘了this
      id: this.$route.params.id,
      newsinfo: {}
    };
  },
  created() {
    this.getnewsinfo();
  },
  methods: {
    // 请求新闻详情
    getnewsinfo() {
      this.$http.get(`api/getnew/${this.id}`).then(res => {
        // console.log(res.body);
        this.newsinfo = res.body.message[0];
      });
    }
  },
  components: {
    // 第三步：注册为组件
    comment
  }
};
</script>
// bug：使用v-html绑定的内容，设置样式时删了scoped才能生效
<style lang="less" >
.newsinfo {
  padding: 5px;
  h3 {
    font-size: 14px;
    color: rgb(20, 20, 20);
    text-align: center;
  }
  .time {
    display: flex;
    justify-content: space-between;
    color: rgb(12, 177, 177);
    margin: 10px 5px;
  }
  p {
    color: rgb(54, 53, 53);
  }
}
</style>